<template>
    <div class="right">
        <div class="header">会员中心-我的题库</div>
        <div class="shanghcuan" @click="shanghcuan">我要上传题库</div>
        <div class="content" v-loading="loading">
            <div class="content_div">
                <div class="content_items" v-for="(item, index) in list" :key="index">
                    <div class="left">
                        <div class="left_items">[标题] {{ item.name }}</div>
                        <div class="left_items">[答案] {{ item.answer }}</div>
                        <div class="date">{{ item.createTime }}</div>
                    </div>
                    <div class="right">
                        <div class="num" :style="{ color: Number(item.points) > 0 ? 'rgb(179, 173, 173)' : 'red' }">
                            {{ (Number(item.points) > 0 ? '+' : '') + item.points }}
                        </div>
                        <div class="status">{{ item.auditStatus == '0' ? '待审' : item.auditStatus == '1' ? '未通过' : '通过'
                            }}</div>
                    </div>
                </div>
            </div>


            <div class="paginations">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getquestionmyList" :layout="'prev, pager, next'"
                    :prevText="'上一页'" :nextText="'下一页'" />
            </div>
        </div>

        <el-dialog title="上传题库" v-model="open" width="600px" append-to-body>
            <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="60px" scroll-to-error>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="题名" prop="name">
                            <el-input clearable placeholder="请输入题名" v-model="formData.name" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="类型" prop="type">
                            <el-select v-model="formData.type" clearable filterable>
                                <el-option v-for="item in djj_question_type" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="等级" prop="levelId">
                            <el-select v-model="formData.levelId" clearable filterable>
                                <el-option v-for="item in gradeColumns" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row v-if="formData.type == '单选' || formData.type == '多选'">
                    <el-col :span="24">
                        <el-form-item label="选项A" prop="optionA">
                            <el-input clearable placeholder="请输入选项A" v-model="formData.optionA" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.type == '单选' || formData.type == '多选'">
                    <el-col :span="24">
                        <el-form-item label="选项B" prop="optionB">
                            <el-input clearable placeholder="请输入选项B" v-model="formData.optionB" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.type == '单选' || formData.type == '多选'">
                    <el-col :span="24">
                        <el-form-item label="选项C" prop="optionC">
                            <el-input clearable placeholder="请输入选项C" v-model="formData.optionC" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="formData.type == '单选' || formData.type == '多选'">
                    <el-col :span="24">
                        <el-form-item label="选项D" prop="optionD">
                            <el-input clearable placeholder="请输入选项D" v-model="formData.optionD" />
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row v-if="formData.type == '单选'">
                    <el-col :span="24">
                        <el-form-item label="解答" prop="answer">
                            <el-select v-model="formData.answer" clearable filterable>
                                <el-option v-for="item in djj_question_option" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formData.type == '多选'">
                    <el-col :span="24">
                        <el-form-item label="解答" prop="answer">
                            <el-select v-model="formData.answer" clearable filterable multiple>
                                <el-option v-for="item in djj_question_option" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formData.type == '简答'">
                    <el-col :span="24">
                        <el-form-item label="解答" prop="answer">
                            <el-input clearable placeholder=" 请输入网名" v-model="formData.answer" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row v-if="formData.type == '判断'">
                    <el-col :span="24">
                        <el-form-item label="解答" prop="answer">
                            <el-select v-model="formData.answer" clearable filterable>
                                <el-option v-for="item in djj_question_true_false" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>



                <el-row>
                    <el-col :span="24">
                        <el-form-item label="内容" prop="answerDesc">
                            <el-input clearable placeholder=" 请输入内容" v-model="formData.answerDesc" type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <div class="upload_button" @click="submitForm(formDataRef)">我要上传</div>
                    <!-- <el-button type="primary" @click="submitForm(formDataRef)">确 定</el-button> -->
                    <!-- <el-button @click="cancel">取 消</el-button> -->
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { questionmyList, listUserLevel, addQuestion } from '@/api/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { djj_question_type, djj_question_option, djj_question_true_false } = toRefs<any>(proxy?.useDict('djj_question_type', 'djj_question_option', 'djj_question_true_false'));
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const list = ref([])
const total = ref(0)
const open = ref(false)
const formDataRef = ref()
const formData = ref({
    name: '',
    type: '',
    levelId: '',
    answerDesc: '',
    answer: '',
    optionA: '',
    optionB: '',
    optionC: '',
    optionD: '',
})
const rules = ref({
    name: [
        { required: true, message: '请输入题名', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'change' },
    ],
    levelId: [
        { required: true, message: '请选择等级', trigger: 'change' },
    ],
    answerDesc: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
    answer: [
        { required: true, message: '请输入解答', trigger: 'change' },
    ],
})
const gradeColumns = ref([])
/** 等级 */
const getGrade = async () => {
    const res = await listUserLevel({})
    res.rows.forEach(element => {
        element.lable = element.grade
        element.value = element.id
    });
    gradeColumns.value = res.rows
}
/** 列表 */
const getquestionmyList = async () => {
    loading.value = true
    const res = await questionmyList(queryParams.value)
    res.rows.forEach(element => {
        element.createTime = element.createTime.split(' ')[0].replace(/-/g, "/")
    });
    list.value = res.rows
    total.value = res.total
    loading.value = false
}
/** 取消 */
const cancel = () => {
    open.value = false
    formData.value = {
        name: '',
        type: '',
        levelId: '',
        answerDesc: '',
        answer: '',
        optionA: '',
        optionB: '',
        optionC: '',
        optionD: '',
    }
}
/** 确定 */
const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate(async (valid: any, fields: any) => {
        if (valid) {
            await addQuestion(formData.value)
            proxy?.$modal.msgSuccess('新增成功')
            cancel()
            formEl.resetFields();
            getquestionmyList()
        }
    })
}

const shanghcuan = () => {
    open.value = true
}
onMounted(async () => {
    getquestionmyList()
    getGrade()
});
</script>
<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: center;

    .upload_button {
        width: 150px;
        height: 40px;
        background: #22AFE5;
        border-radius: 14px;
        text-align: center;
        line-height: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
    }
}

.right {
    width: calc(100% - 410px);
    height: 100%;
    position: relative;


    .shanghcuan {
        position: absolute;
        top: 15px;
        right: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        cursor: pointer;
    }

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        box-sizing: border-box;
        padding: 40px 0 0 0;
        color: #969696;

        .content_div {
            width: 100%;
            height: calc(100% - 72px);
            overflow: auto;

            .content_items {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #E6E6E6;
                box-sizing: border-box;
                padding: 10px 0;

                .left {
                    width: 400px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #000000;
                    margin-right: 100px;

                    .left_items {
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-top: 15px;
                    }

                    .date {
                        margin-top: 15px;
                        margin-left: 42px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                    }
                }

                .right {
                    flex: 1;
                    text-align: right;
                    margin-right: 20px;

                    .num {
                        font-size: 30px;
                    }

                    .status {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #969696;
                        margin-top: 35px;
                    }
                }
            }


        }


        .paginations {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
}
</style>